<nz-row>
    <nz-col class="min-col">
        <div>
            <input type="file" name="myPhoto" (change)="choseImage($event)" />
        </div>
        <div class="switch-box">
            <div class="label">切换大小端</div>
            <nz-switch [(ngModel)]="options.endian" (ngModelChange)="convert($event)"></nz-switch>
        </div>
        <div class="switch-box">
            <div class="label">颜色反转</div>
            <nz-switch [(ngModel)]="options.invert" (ngModelChange)="convert($event)"></nz-switch>
        </div>
        <div class="switch-box">
            <div class="label">使能抖动</div>
            <nz-switch [(ngModel)]="options.dither" (ngModelChange)="convert($event)"></nz-switch>
        </div>
        <div class="slider-box" *ngIf="!options.dither">
            <div class="label">取色阀值</div>
            <nz-slider [(ngModel)]="options.threshold" [nzMax]="255" (ngModelChange)="convert($event)"></nz-slider>
        </div>
    </nz-col>
    <nz-col class="padding-left">
        <div>
            <p>这是一个完全开源的纯前端点阵液晶取模程序</p>
            <p>推荐配合Arduino u8g2库显示图像</p>
            <p>如果显示不正常，切换下大小端再试试</p>
            <p>遇到问题可以
                <a href="http://www.arduino.cn/thread-42174-1-1.html">在Arduino中文社区提问</a>
            </p>
            <p>源码可见
                <a href="https://github.com/coloz/image-to-bitmap-array">github</a>
            </p>
            <p>觉得有用的话，可以打个星星支持下</p>
        </div>
    </nz-col>
    <nz-col>
        <div class="ad-box">
            <a href="https://union-click.jd.com/jdc?e=&p=AyIGZRprFQIVAFUTWxMyVlgNRQQlW1dCFFlQCxxKQgFHREkdSVJKSQVJHFRXFk9FUlpGQUpLCVBaTFhbXQtWVmpSWRtbEgUSD1Uda3ZnE2ARXCtwYUFhPm86XgpSXwZEInUOHjdUK14SBBADUh5YJTISAGVNNRUDEwZUGl8RAhU3VCtbEQsUD10fWBABFwBQK1wVCyICVBJcFgEaBkkTWRYHEwRVH2slMhE3ZStbJQEiRTsaCEAFFA5VH1NCBhYCUxlYHFUWBV0aXUcHEgBTSFMUBiIFVBpfHA%3D%3D" target="_blank">
                <img src="assets/bookad.jpg">
            </a>
        </div>
    </nz-col>
</nz-row>
<nz-row>
    <nz-col>
        <div class="img-box">
            <div *ngIf="imageData">
                <img [src]="imageData" image />
            </div>
            <div *ngIf="imageData">
                <h1> >>> </h1>
            </div>
            <div>
                <canvas #myCanvas result></canvas>
            </div>
        </div>
    </nz-col>
</nz-row>
<nz-row>
    <nz-col *ngIf="result">
        <div class="code-box">
            转换结果
            <ngx-codemirror [ngModel]="result" [options]="codemirrorOptions"></ngx-codemirror>
        </div>
    </nz-col>
</nz-row>